<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- form包含了表单的所有内容 action=""表单信息提交到哪 -->
    <form action="https://www.baidu.com">
        <!-- type控件类型 name控件名称 value设置输入框默认值 placeholder文本占位符
             readonly只读，单值属性 maxlength最大长度 -->
        <!-- text普通文本输入框 password密码输入框 -->
        用户名：<input type="text" name="username" value="rose" readonly> <br>
        密码:<input type="password" name="pwd" placeholder="请输入密码" maxlength="6"> <br>
        <!-- radio单选框:必须设置name属性分到同一组才能实现单选 必须设置value否则提交的是on -->
        性别:
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="0" checked>女
        <br>
        <!-- checkbox多选框:必须设置value否则提交的是on checked默认选中-->
        爱好:
        <input type="checkbox" name="hobby" value="smoke">抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm">烫头
        <input type="checkbox" name="hobby" value="java" checked>学Java
        <br>
        <!-- date日期控件 file文件上传控件-->
        生日:<input type="date" name="birthday"> <br>
        靓照:<input type="file" name="img"> <br>
        <!-- 下拉选框，option是选项 selected默认被选中 注意设置value -->
        所在地:
        <select name="city">
            <option value="bj">北京</option>
            <option value="cq">重庆</option>
            <option value="lz" selected>兰州</option>
        </select>
        <br>
        <!-- submit提交按钮 value设置的是按钮上显示的文字-->
        <input type="submit" value="点我提交信息"> <br>
        <!-- reset重置按钮 将所有控件内容恢复到初始状态，不是清空！！！-->
        <input type="reset" value="重置按钮"> <br>
        <!-- button普通按钮，一般会绑定JS代码使用-->
        <input type="button" onclick="alert('我猜你就要点我')" value="普通按钮">
        <!-- h5新增的按钮写法，默认是普通按钮，也可以加type属性变成其它类型的按钮 -->
        <button>哈哈哈哈</button>
        <hr>
        <!--关联标签 for属性的值是关联的控件的id值-->
        <input type="checkbox" id="agree">
        <label for="agree">我同意相关的服务协议</label>
    </form>
</body>
</html>